<template>
  <div class='list'>
    <ul>
      <li v-for="(item, index) in listData" :key="index" class="bc-white" @click="showDetail(item)">
        <img :src="img" alt="">
        <div>
          <p>{{item.name}}</p>
          <p>成员总量：{{item.count}}人</p>
        </div>
        <img :src="arrow" alt="" class="fr">
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['listData','routerDetail'],
  components: {},
  name: "",
  data() {
    return {
      img:require("../../../../assets/images/message/icon-user.png"),
      arrow:require("../../../../assets/images/message/arrow-right-green.png")
    };
  },
  methods: {
    showDetail(item){
      if(this.routerDetail)this.routerDetail(item)
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  height:100% ;
  ul{
    padding-top: 20px;
  }
  li{
    padding: 20px;
    display: flex;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    margin-bottom: 20px;

    >div{
      flex: 1;
      margin-left: 20px;
      vertical-align: middle;
    }
    img{
      width: 74px;
      height: 65px;
      vertical-align: middle;
      margin-top: 10px;
    }
    img.fr{
      width: 20px;
      height: 37px;
      margin-top: 25px;
      
    }
  }
}
</style>